{% extends "dvaui/base.html" %}
{% load staticfiles %}
{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>Process {{ object.pk }}</h2>
        </div>
    </div>
</div>
</section>
<section class="content">
<div class="row">
    <div class="col-lg-6">
        <div class="box box-primary">
            <div class="box-header with-border"><h3>Script</h3></div>
            <div class="box-body text-center">
                <div style="width:90%;height:500px;margin: auto" id="editor"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box box-primary">
            <div class="box-header with-border"><h3  style="display: inline-block">Tasks</h3>
                <a class="btn btn-primary pull-right" href="{% url 'process_tasks' object.pk %}" style="margin: 10px auto" > <i class="fa fa-list"></i> All tasks</a>
            </div>
            <div class="box-body">
            <div class="row text-center">
                <div class="col-xs-3">
                    <a class="btn btn-warning btn-block" href="{% url 'process_tasks_status' object.pk 'pending' %}" style="margin: 10px auto" > <i class="fa fa-clock-o"></i> {{ pending_tasks }} pending</a>
                </div>
                <div class="col-xs-3">
                    <a class="btn btn-primary btn-block" href="{% url 'process_tasks_status' object.pk 'running' %}" style="margin: 10px auto" > <i class="fa fa-gears"></i> {{ running_tasks }} running</a>
                </div>
                <div class="col-xs-3">
                    <a class="btn btn-success btn-block" href="{% url 'process_tasks_status' object.pk 'successful' %}" style="margin: 10px auto" > <i class="fa fa-check"></i> {{ successful_tasks }} done</a>
                </div>
                <div class="col-xs-3">
                    <a class="btn btn-danger btn-block" href="{% url 'process_tasks_status' object.pk 'failed' %}" style="margin: 10px auto" > <i class="fa fa-close"></i> {{ errored_tasks }} failed</a>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
</section>
{% endblock %}
{% block page_js%}
<script>
    var process_script = {{ json|safe }};
    $(document).ready(function() {
        InitializeTables();
        var editor = ace.edit("editor",{
            wrapBehavioursEnabled:true,
            autoScrollEditorIntoView:true});
        editor.setTheme("ace/theme/chrome");
        editor.getSession().setMode("ace/mode/json");
        editor.getSession().setValue(JSON.stringify(process_script,null,4));
    })
</script>
{% endblock %}
